<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <!--
        * @作者: 陈会丽 *
        * @时间：2024-2025-1 *
        -->
    </head>
    <body>
        <div id="box0">
			<div><header id="box1">文档的头部区域</header></div>
		<div id="">
			<nav id="box2">导航链接部分</nav>
		</div>
		<div id="box3"><aside>页面的侧边栏内容</aside></div>
		<div id="box4"><section>文档的节</section></div>
		
		<div id="box5"><article>页面独立的内容区域</article></div>
		
		
		<div id="box6"><footer>页脚</footer></div>
	    </div>
	    <style>
	    	/* 绝对定位：
				 1.绝对定位元素会脱离文件流，原来的空间不存在
				 2.后面绝对定位的元素会盖住前面定位的元素
				 3.一旦设置偏移量，绝对定位元素将默认按照我们整个html参考文档进行移动
				 4.行内元素设置为绝对定位*/
				/* position: absolute; */
				/* 固定定位：
				 1.设置固定定位元素会脱离文件流，在标准文件流之上
				 2.元素会固定在页面上，不会随着滚动条
				 position: fixed;*/
				/* 相对定位，元素按照原来位置，参照指定方向进行移动
			 1.只设置相对定位，元素没有影响
			 2.一旦设置偏移量left\top\right\bottom,元素会按照原来参考位置进行移动
			 3.盒子原来的空间仍然存在
			 4.设置相对定位是破坏文件流进行移动*/
			/* 静态定位：所有元素默认都是静态定位
			 * position: static; */
				
				
	    	#box0{
	    		width: 1000px;
	    		height: 500px;
	    		margin-bottom: 40px;
	    		/*绝对定位*/
	    		position: absolute;/*绝对定位*/
	    	}
	    	#box1{
				  	top: 0px;
				  	left: 0px;
				  	position: absolute;
				  }
				  #box2{
				  	top: 60px;
				  	left: 0px;
				  	position: absolute;
				  }
				  #box3{
				  	top: 120px;
				  	left:0 px;
				  	position: absolute;
				  }
	    	 #box4{
				  	top: 120px;
				  	left: 200px;
				  	position: absolute;
				  }
				   #box5{
				  	top: 280px;
				  	left: 200px;
				  	position: absolute;
				  }
				   #box6{
				  	top: 440px;
				  	left: 0px;
				  	position: absolute;
				  }
	    	
	    	header,nav,footer{
	    		    background-color: #B3C0D1;
  				    color: #333;
    				text-align: center;
    				line-height: 60px;
    				width: 1000px;
    				
	    	}
	    	  aside {
                background-color: #D3DCE6;
                color: #333;
                text-align: center;
                line-height: 320px;
                width: 200px;
                position: absolute;
				  }
				 
				  article,section{
				  	
				  	
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
    width: 800px;
    
  }
  
	    </style>
    </body>
</html>